<template>
  <div>
    <div class="topHeader">
      <div
        v-for="(item, index) in dateList"
        :key="index"
        class="topBox"
        :class="current === index ? 'activep' : ''"
        @click="changeDate(index)"
      >
        {{ item }}
        <a-range-picker
          v-if="index === 4"
          v-model="rangeDate"
          :format="dateFormatList"
          @change="onDateChange"
        />
      </div>
    </div>
    <!--  内容区域  -->
    <div class="app-container">
      <a-row :gutter="10">
        <a-col :xl="7" :xxl="7">
          <!--    设备数量      -->
          <EquipmentNumber />
          <!--    状态统计      -->
          <StateStatistics />
        </a-col>

        <!--    加工信息    -->
        <a-col :xl="11" :xxl="11">
          <ProcessingInformation />
        </a-col>
        <!--    报警分析    -->
        <a-col :xl="6" :xxl="6">
          <AlarmAnalysis />
        </a-col>
      </a-row>
      <a-row :gutter="10">
        <!-- 效率分析 -->
        <a-col :xl="7" :xxl="7">
          <EfficiencyAnalysis
            :chartData="chartData"
            @onTabChange="efficiencyonTabChange"
          />
        </a-col>
        <!-- 生产统计 -->
        <a-col :xl="9" :xxl="9">
          <ProductionFigures :productrank="productrank" :timerank="timerank" />
        </a-col>

        <!-- 产量统计 -->
        <a-col :xl="8" :xxl="8">
          <ProductStatistics :chartDatalineobj="chartDataline" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { dateList, dateFormatList } from "./components/tabConfig";
import EquipmentNumber from "./components/EquipmentNumber";
import StateStatistics from "./components/StateStatistics";
import ProcessingInformation from "./components/ProcessingInformation";
import AlarmAnalysis from "./components/AlarmAnalysis";
import EfficiencyAnalysis from "./components/EfficiencyAnalysis";
import ProductionFigures from "./components/ProductionFigures";
import ProductStatistics from "./components/ProductStatistics";

export default {
  name: "index",
  components: {
    ProductStatistics,
    ProductionFigures,
    EfficiencyAnalysis,
    AlarmAnalysis,
    ProcessingInformation,
    StateStatistics,
    EquipmentNumber
  },
  data() {
    return {
      current: 0, // 当前选中
      dateList,
      dateFormatList,
      rangeDate: ""
    };
  },
  methods: {
    changeDate(index) {
      this.current = index;
    },
    // 自定义时间变化回调
    onDateChange(dates, datestring) {
      this.timeParames.startTime = datestring[0];
      this.timeParames.endTime = datestring[1];
      this.params.startTime = datestring[0] + " 00:00:00";
      this.params.endTime = datestring[1] + " 23:59:59";
      this.initData();
    }
  }
};
</script>

<style scoped lang="less">
@import "index";
</style>
